<template>
  <div>
    <a-modal
      v-model:visible="visible"
      :closable="false"
      :footer="null"
      :maskClosable="false"
    >
      <div class="title">
        <p>
          <a-typography-title :level="2">安顺职业技术学院</a-typography-title>
        </p>
        <p>
          <a-typography-title :level="2"
            >考证在线报名收费系统</a-typography-title
          >
        </p>
      </div>
      <div class="divider">
        <a-divider>
          <div class="login_text">登录方式</div>
        </a-divider>
      </div>
      <div class="wechat_logo">
        <WechatFilled
          :style="{
            fontSize: '40px',
            color: '#fff',
            backgroundColor: '#2DC101',
            borderRadius: '50%',
          }"
          @click="toScan"
        />
      </div>
    </a-modal>
  </div>
</template>

<script>
import { reactive, ref } from "@vue/reactivity";
import { WechatFilled } from "@ant-design/icons-vue";
export default {
  components: {
    WechatFilled,
  },
  setup() {
    const visible = ref(true);
    
    // 设置微信扫码页参数
    const state = reactive({
        appid:"wx7496665e5f925df9",
        redirect_uri:encodeURIComponent("http://t1.ossjk.com/zyjsxy-miniapp-api/pcWxlogin")
    })
    
    const toScan = ()=>{
        //外链接跳转
        window.location.href = `https://open.weixin.qq.com/connect/qrconnect?appid=${state.appid}&redirect_uri=${state.redirect_uri}&response_type=code&scope=snsapi_login&state=STATE#wechat_redirect`
    }

    return {
      visible,
      toScan,
    };
  },
};
</script>

<style scoped>
.title {
  margin-top: 5vh;
}
p {
  text-align: center;
  font-size: 30px;
  font-weight: normal;
}
.divider {
  margin: 24px 0;
  margin-top: 5vh;
}
.login_text {
  font-size: 14px;
  border: 1px solid #dcdfe6;
  border-radius: 10px;
  position: absolute;
  padding: 0 20px;
  background-color: #fff;
  left: 50%;
  transform: translateX(-50%);
  margin-top: -11px;
}
.wechat_logo {
  display: flex;
  justify-content: center;
}
</style>